<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心 - 獭米英语单词本</title>
  <link rel="icon" href="../favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/user.css">
  <script src="../js/plugins.js"></script>
  <script src="../js/api-client.js"></script>
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <!-- 品牌区域 -->
    <div class="navbar-left">
      <a href="../index.html" class="navbar-brand" data-page="wordlist">
        <img src="../img/logo.png" alt="Logo" class="logo">
        <div class="brand-text">
          <span class="brand-name">獭米英语单词本</span>
          <span class="brand-slogan">Tami English Vocabulary Book</span>
        </div>
      </a>
    </div>
    
    <!-- 导航链接区域 -->
    <div class="navbar-center">
      <div class="navbar-nav">
        <a href="../index.html" class="nav-link" data-page="wordlist">单词列表</a>
        <a href="vocabulary-test.html" class="nav-link" data-page="vocabulary-test">测试词汇</a>
      </div>
    </div>
    
    <!-- 用户区域 -->
      <div class="navbar-right">
        <div class="nav-user" id="nav-user">
          <a href="account.html" class="nav-link" id="nav-login">登录</a>
          <div class="user-dropdown" id="user-dropdown" style="display: none;">
            <div class="user-info">
              <img src="../img/default-avatar.png" alt="头像" class="user-avatar" id="nav-user-avatar">
              <span class="nav-username" id="nav-username">用户名</span>
            </div>
            <div class="dropdown-menu" id="dropdown-menu">
              <a href="user.html" class="dropdown-item">个人中心</a>
              <button class="dropdown-item logout-btn" id="logout-btn">退出登录</button>
            </div>
          </div>
        </div>
      </div>
  </nav>

  <!-- 主要内容 -->
  <div class="user-container">
    <div class="user-header">
      <h1 class="user-title">个人中心</h1>
      <p class="user-subtitle">管理您的个人信息和偏好设置</p>
    </div>
    
    <form class="user-form" id="user-form">
      <!-- 头像部分 -->
      <div class="avatar-section">
        <img src="../img/default-avatar.png" alt="用户头像" class="avatar-display" id="user-avatar">
        <div class="avatar-info">
          <h3>个人头像</h3>
          <p>支持 JPG、PNG 格式，建议尺寸 200x200 像素</p>
          <button type="button" class="avatar-upload-btn" id="avatar-upload-btn">修改头像</button>
        </div>
      </div>
      
      <!-- 基本信息 -->
      <div class="form-row">
        <div class="form-group">
          <label class="form-label" for="user-account">账号</label>
          <input type="text" class="form-input readonly-field" id="user-account" readonly>
        </div>
        <div class="form-group">
          <label class="form-label" for="user-nickname">昵称</label>
          <input type="text" class="form-input" id="user-nickname" placeholder="请输入2~12个字符" maxlength="12">
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">性别</label>
          <div class="gender-buttons">
            <button type="button" class="gender-btn active" data-value="secret">保密</button>
            <button type="button" class="gender-btn" data-value="male">男生</button>
            <button type="button" class="gender-btn" data-value="female">女生</button>
          </div>
          <input type="hidden" id="gender-hidden" name="gender" value="secret">
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label class="form-label" for="user-phone">手机号</label>
          <input type="tel" class="form-input" id="user-phone" placeholder="请输入11位手机号" maxlength="11">
        </div>
        <div class="form-group">
          <label class="form-label" for="user-email">邮箱</label>
          <input type="email" class="form-input" id="user-email" placeholder="提供邮箱可提升账号安全性">
        </div>
      </div>
      
      <div class="form-group full-width">
        <label class="form-label" for="user-bio">个人简介</label>
        <textarea class="form-textarea" id="user-bio" placeholder="简单介绍一下自己" maxlength="140"></textarea>
        <div class="char-count">
          <span id="bio-count">0</span>/140
        </div>
      </div>
      
      <button type="submit" class="save-btn" id="save-btn" disabled>保存修改</button>
    </form>
  </div>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="footer-container">
      <div class="footer-content">
        <p>
          <a href="https://www.tami-network.com/" target="_blank">獭米网络官网</a>
          <span class="footer-separator">|</span>
          <a href="mailto:tami-network@163.com">tami-network@163.com</a>
          <span class="footer-separator">|</span>
          <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024099604号-2</a>
          <span class="footer-separator">|</span>
          ©2025 成都獭米网络科技有限公司 保留所有权利
          <span class="footer-separator">|</span>
          v1.1.2
        </p>
      </div>
    </div>
  </footer>

  <script src="../js/user.js"></script>
</body>
</html>